<template>
  <div class="main_box_son">
    <div class="main_conent">
      <div class="title">报表报送</div>
      <div class="divheight10"/>
      <div class="audit_first">
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="6">
            <div class="grid-content bg-purple displayib">
              <el-input v-model="search1" placeholder="请输入内容" @input="serchChange"/>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="gjsx" @click="showText = !showText">高级删选<span :class="showText?'el-icon-arrow-up rotate1':'el-icon-arrow-up rotate'"/></div>
          </el-col>
          <el-col :span="13"/>
          <el-col :span="2">
            <el-button type="primary" class="width100" @click="SubmitAudit">报送</el-button>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="showText" class="bgg transition-box" >

            <el-row :gutter="100" type="flex" justify="space-between">
              <el-col :span="12">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">报表依据</span>
                    <el-select :clearable="flag" v-model="search2" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple textalign">
                  <template>
                    <span class="wn1">报表状态</span>
                    <el-select :clearable="flag" v-model="search3" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="100" type="flex" justify="space-between">
              <el-col :span="12">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">产品品种</span>
                    <el-select :clearable="flag" v-model="search4" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light textalign">
                  <template>
                    <span class="wn1">报送频次</span>
                    <el-select :clearable="flag" v-model="search5" class="claswithwn" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="40" type="flex" class="btnpr" justify="end">
              <el-col :span="6" class="btn2_c">
                <el-button class="btn " type="primary" size="medium ">查询</el-button>
                <el-button class="btn" type="success" size="medium " @click="storage">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </div>
      <el-table
        :data="tableData.filter(data => !search || Object.values(data).toString().toLowerCase().includes(search.toLowerCase()))"
        :border="true"
        class="tb-edit"
        style="width: 100%"
        @cell-click="cellclick"
        @row-dblclick="dblclickFun"
        @selection-change="MultipleSelectionValue">
        <el-table-column
          fixed
          align="center"
          type="selection"
          width="50"/>
        <el-table-column
          fixed
          type="index"
          width="50"
          label="序号"
          align="center"
        />
        <el-table-column
          v-for="(item,index) in tableHead"
          :label="item.label"
          :property="item.property"
          :key="index"
          align="center"
        >
          <template slot-scope="scope" select="selecttest">
            <span>{{ MonitorDataToArr[scope.$index][index] }}</span>
          </template>

        </el-table-column>
        <el-table-column label="操作" align="center" width="160" fixed="right" type="index">
          <template slot-scope="scope">
            <!-- <span>{{ oldTableData[scope.$index].state }}</span>         -->
            <router-link :to="{path: '/details', query: {id: MonitorOldTableData[scope.$index].number}}"><el-button size="mini" >详情</el-button></router-link>
            <el-button size="mini" @click="buttonPass([scope.$index])">报送</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'ReportSubmitted',
      dialogVisible: false,
      currentPage: 0,
      showText: false,
      options: [{
        value: '待审核',
        label: '待审核'
      }, {
        value: '已通过',
        label: '已通过',
        disabled: true
      }],
      options2: [{
        value: '证券公司',
        label: '证券公司'
      }, {
        value: '金融公司',
        label: '金融公司',
        disabled: true
      }],
      value2: '',
      search: '',
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      search5: '',
      tableHead: [
        {
          prop: 'name',
          label: '报表名称',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '报表编号',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '状态',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '产品品种',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报表生成时间',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '经办人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报送频次',
          align: 'left',
          width: 10
        }
      ],
      oldTableData: [],
      tableData: [],
      // 数据值
      dataToArr: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '已生成',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '未生成',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1003',
          state: '未生成',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1004',
          state: '未生成',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1005',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        },
        {
          name: '息表',
          number: 'A10010',
          state: '未生成',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日'
        }
      ],
      flag: true,
      selectionValue: []
    }
  },
  computed: {
    MonitorOldTableData: function() {
      return this.oldTableData
    },
    MonitorDataToArr: function() {
      return this.dataToArr
    }
  },
  mounted() {
    this.tableData = this.dataToArr
    this.oldTableData = this.dataToArr
    const tableList = this.tableData
    const arr = []
    for (var i = 0; i < tableList.length; i++) {
      arr[i] = []
    }
    for (const i in tableList) {
      for (const b in tableList[i]) {
        arr[i].push(tableList[i][b])
      }
    }
    this.dataToArr = arr
  },
  created() {
  },
  methods: {
    SubmitAudit() {
      var selectionValue = this.selectionValue.filter((el) => {
        return el.state === '已生成'
      })
      console.log(selectionValue)
    },
    generate() {
      var selectionValue = this.selectionValue.filter((el) => {
        return el.state === '未生成'
      })
      console.log(selectionValue)
    },
    dblclickFun(row, column, cell, event) {
      this.$router.push({
        path: '/details',
        query: {
          id: row.number
        }
      })
    },
    cellclick(row, column, cell, event) {
      // console.log(row) // 当前行数据
      // console.log(column)
      // console.log(cell) // 当前target
      // console.log(event)
    },
    // 多选的值
    MultipleSelectionValue(e) {
      this.selectionValue = []
      e.forEach(element => {
        this.selectionValue.push({ 'number': element.number, 'state': element.state })
      })
    },

    serchChange(e) {
      this.search = e
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // selectFocus (e) {
    //   this.temporary = this.tableData
    // },
    // selectBlur () {
    //   this.tableData = this.temporary
    // },
    // search2fun (e) {
    //   this.search = e
    //   console.log(e)
    //   this.tableData = this.tableData.filter(data => !this.search || Object.values(data).toString().toLowerCase().includes(this.search.toLowerCase()))
    //   let tableList = this.tableData
    //   let arr = []
    //   for (var i = 0; i < tableList.length; i++) {
    //     arr[i] = []
    //   }
    //   for (let i in tableList) {
    //     for (let b in tableList[i]) {
    //       arr[i].push(tableList[i][b])
    //     }
    //   }
    //   this.dataToArr = arr
    // },
    storage() {
      this.search = ''
      this.search1 = ''
      this.flag = true
      this.search2 = null
      this.search3 = null
      this.search4 = null
      this.search5 = null
    }
  }
}
</script>
<style rel="stylesheet/stylus" lang="stylus" scope>
@import '~@/assets/common';

.title {
  width: 100%
  border-bottom: $borderbottom;
  line-height: $titlelineheight;
  font-size: $titlefontsize;
}
.audit_first {
  padding 20px 0
}
.audit_first_span {
  font-size 14px
  padding-right 20px
  color $colorbluedark
}
.claswithwn {
  width 50%
  margin-top 20px
}
.el-pagination {
  margin 20px 0
}
.btn {
  height 100%
  display inline-block
}
.btnpr {
  padding-right 40px
}
.wn1 {
  padding-right 20px
}
.btn2_c {
  text-align center
  margin-top 20px
}
div.gjsx {
  display inline-block
  font-size 16px
  padding 0 20px
  cursor:pointer
}
.displayib {
  display inline-block
  width :100%
}
.bgg {
  background #fbfbfb
  padding 10px 0
  margin-top 10px
}
.rotate{
 transform-origin:center center; //旋转中心要是正中间 才行
transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s; //过度时间 可调
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
 -o-transition: -o-transform 0.2s;
 -ms-transition: -ms-transform 0.2s;

}

.rotate1{
 transform-origin:center center;
transform: rotate(0deg); //返回原点
 -webkit-transform: rotate(0deg);
-moz-transform: rotate(deg);
-ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
transition: transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 -o-transition: -o-transform 0.2s;
 -ms-transition: -ms-transform 0.2s;

}
.baobiao_tab {
  height 300px
  .progress-item {
    padding-top 20px
  }
}
.baobiao_tab1 {
  height 373px
}
div.el-progress-bar__outer {
  height 14px!important
}
.bbsc {
  margin 0 auto
  width 80px
  margin-top 50px
  p {
    text-align center
    line-height 20px
  }
}
.margint40 {
  margin-top 40px
}
.wunai {

}
</style>
